Ön Uç Şekil Algılama API'si: Tarayıcıda Bilgisayarlı Görü Entegrasyonu için Bir Kılavuz

Web tarayıcısı, sadece statik içerik göstermekten daha fazlası için güçlü bir platforma dönüşüyor. JavaScript ve tarayıcı API'lerindeki gelişmelerle birlikte, artık karmaşık görevleri doğrudan istemci tarafında gerçekleştirebiliyoruz. Bu gelişmelerden biri de, geliştiricilerin görüntülerde ve videolarda yüzler, barkodlar ve metinler dahil olmak üzere çeşitli şekilleri algılamasına olanak tanıyan bir tarayıcı API'si olan Şekil Algılama API'si'dir. Bu, temel bilgisayarlı görü görevleri için sunucu tarafı işlemeye dayanmadan, etkileşimli ve akıllı web uygulamaları oluşturmak için bir olasılıklar dünyası açar.

Şekil Algılama API'si Nedir?

Şekil Algılama API'si, doğrudan tarayıcı içinde bilgisayarlı görü algoritmalarına erişmek için standartlaştırılmış bir yol sunar. Üç ana algılayıcıyı kullanıma sunar:

• FaceDetector: Görüntülerde ve videolarda insan yüzlerini algılar.
• BarcodeDetector: Çeşitli barkod formatlarını algılar ve çözer.
• TextDetector: Görüntülerdeki metin bölgelerini algılar. (Not: Henüz tarayıcılarda yaygın olarak uygulanmamaktadır)

Bu algılayıcılar doğrudan istemcinin cihazında çalışır, bu da görüntü veya video verilerinin işlenmek üzere bir sunucuya gönderilmesi gerekmediği anlamına gelir. Bu, aşağıdakiler de dahil olmak üzere birçok avantaj sunar:

• Gizlilik: Hassas veriler kullanıcının cihazında kalır.
• Performans: Sunucuya gidiş-dönüş olmadığı için azaltılmış gecikme süresi.
• Çevrimdışı Yeteneği: Bazı uygulamalar çevrimdışı algılamaya izin verebilir.
• Azaltılmış Sunucu Maliyetleri: Arka uç altyapınızda daha az işlem yükü.

Tarayıcı Desteği

Şekil Algılama API'si için tarayıcı desteği hala gelişmektedir. API, Chrome ve Edge gibi bazı modern tarayıcılarda mevcut olsa da, Firefox ve Safari gibi diğerlerindeki destek sınırlı olabilir veya deneysel özelliklerin etkinleştirilmesini gerektirebilir. API'yi üretim ortamında kullanmadan önce her zaman en son tarayıcı uyumluluk tablolarını kontrol edin. Her bir özelliğin mevcut desteğini kontrol etmek için caniuse.com gibi web sitelerini kullanabilirsiniz.

FaceDetector API'sini Kullanma

Bir görüntüdeki yüzleri algılamak için FaceDetector API'sini kullanmanın pratik bir örneğiyle başlayalım.

Temel Yüz Algılama

İşte FaceDetector'ı nasıl kullanacağınızı gösteren temel bir kod parçacığı:

const faceDetector = new FaceDetector();

const image = document.getElementById('myImage'); // Bunun bir <img> öğesi olduğunu varsayalım

faceDetector.detect(image)
  .then(faces => {
    faces.forEach(face => {
      console.log('Yüz şu konumda algılandı:', face.boundingBox);
      // Tuval kullanarak yüzün etrafına bir dikdörtgen çizebilirsiniz
    });
  })
  .catch(error => {
    console.error('Yüz algılama başarısız oldu:', error);
  });

Açıklama:

1. FaceDetector sınıfının yeni bir örneğini oluşturuyoruz.
2. HTML'imizdeki bir resim öğesine (<img>) bir referans alıyoruz.
3. FaceDetector'ın detect() yöntemini, resim öğesini geçirerek çağırıyoruz.
4. detect() yöntemi, her biri algılanan bir yüzü temsil eden bir Face nesneleri dizisiyle çözümlenen bir Promise döndürür.
5. Face nesneleri dizisi üzerinde döngü yapıyoruz ve her yüzün sınırlayıcı kutusunu konsola yazdırıyoruz. boundingBox özelliği, yüzü çevreleyen dikdörtgenin koordinatlarını içerir.
6. Ayrıca, algılama işlemi sırasında oluşabilecek hataları ele almak için bir catch() bloğu ekliyoruz.

Yüz Algılama Seçeneklerini Özelleştirme

FaceDetector yapıcısı, yapılandırma seçenekleri içeren isteğe bağlı bir nesne kabul eder:

• maxDetectedFaces: Algılanacak maksimum yüz sayısı. Varsayılan olarak 1'dir.
• fastMode: Daha hızlı, ancak potansiyel olarak daha az doğru bir algılama modunun kullanılıp kullanılmayacağını belirten bir boole değeri. Varsayılan olarak false'tur.

Örnek:

const faceDetector = new FaceDetector({ maxDetectedFaces: 5, fastMode: true });

Algılanan Yüzlerin Etrafına Dikdörtgen Çizme

Algılanan yüzleri görsel olarak vurgulamak için, HTML5 Canvas API'sini kullanarak etraflarına dikdörtgenler çizebilirsiniz. İşte nasıl yapılacağı:

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

const image = document.getElementById('myImage');

faceDetector.detect(image)
  .then(faces => {
    faces.forEach(face => {
      const { x, y, width, height } = face.boundingBox;

      context.beginPath();
      context.rect(x, y, width, height);
      context.lineWidth = 2;
      context.strokeStyle = 'red';
      context.stroke();
    });
  })
  .catch(error => {
    console.error('Yüz algılama başarısız oldu:', error);
  });

Önemli: Tuval öğesinin resim öğesinin üzerinde doğru bir şekilde konumlandırıldığından emin olun.

BarcodeDetector API'sini Kullanma

BarcodeDetector API'si, görüntülerde ve videolarda barkodları algılamanıza ve çözmenize olanak tanır. Aşağıdakiler de dahil olmak üzere çok çeşitli barkod formatlarını destekler:

• EAN-13
• EAN-8
• UPC-A
• UPC-E
• Code 128
• Code 39
• Code 93
• Codabar
• ITF
• QR Code
• Data Matrix
• Aztec
• PDF417

Temel Barkod Algılama

İşte BarcodeDetector'ı nasıl kullanacağınız:

const barcodeDetector = new BarcodeDetector();

const image = document.getElementById('myBarcodeImage');

barcodeDetector.detect(image)
  .then(barcodes => {
    barcodes.forEach(barcode => {
      console.log('Barkod algılandı:', barcode.rawValue);
      console.log('Barkod formatı:', barcode.format);
      console.log('Sınırlayıcı Kutu:', barcode.boundingBox);
    });
  })
  .catch(error => {
    console.error('Barkod algılama başarısız oldu:', error);
  });

Açıklama:

1. BarcodeDetector sınıfının yeni bir örneğini oluşturuyoruz.
2. Barkod içeren bir resim öğesine bir referans alıyoruz.
3. detect() yöntemini, resim öğesini geçirerek çağırıyoruz.
4. detect() yöntemi, DetectedBarcode nesneleri dizisiyle çözümlenen bir Promise döndürür.
5. Her bir DetectedBarcode nesnesi, algılanan barkod hakkında aşağıdaki bilgileri içerir:
• rawValue: Çözülmüş barkod değeri.
• format: Barkod formatı (ör. 'qr_code', 'ean_13').
• boundingBox: Barkodun sınırlayıcı kutusunun koordinatları.
6. Bu bilgiyi konsola yazdırıyoruz.
7. Hata yönetimini dahil ediyoruz.

Barkod Algılama Formatlarını Özelleştirme

Algılamak istediğiniz barkod formatlarını, BarcodeDetector yapıcısına isteğe bağlı bir format ipuçları dizisi geçirerek belirtebilirsiniz:

const barcodeDetector = new BarcodeDetector({ formats: ['qr_code', 'ean_13'] });

Bu, algılamayı QR kodları ve EAN-13 barkodlarıyla sınırlayarak potansiyel olarak performansı artıracaktır.

TextDetector API'sini Kullanma (Deneysel)

TextDetector API'si, görüntüler içindeki metin bölgelerini algılamak için tasarlanmıştır. Ancak, bu API'nin hala deneysel olduğunu ve tüm tarayıcılarda uygulanmamış olabileceğini unutmamak önemlidir. Kullanılabilirliği ve davranışı tutarsız olabilir. Kullanmaya çalışmadan önce tarayıcı uyumluluğunu dikkatlice kontrol edin.

Temel Metin Algılama (Mevcutsa)

İşte TextDetector'ı nasıl kullanabileceğinize dair bir örnek, ancak çalışmayabileceğini unutmayın:

const textDetector = new TextDetector();

const image = document.getElementById('myTextImage');

textDetector.detect(image)
  .then(texts => {
    texts.forEach(text => {
      console.log('Metin algılandı:', text.rawValue);
      console.log('Sınırlayıcı Kutu:', text.boundingBox);
    });
  })
  .catch(error => {
    console.error('Metin algılama başarısız oldu:', error);
  });

Eğer TextDetector mevcutsa ve algılama başarılı olursa, texts dizisi, her biri bir rawValue (algılanan metin) ve bir boundingBox içeren DetectedText nesneleri içerecektir.

Dikkat Edilmesi Gerekenler ve En İyi Uygulamalar

• Performans: İstemci tarafında işleme bazı durumlarda performans avantajları sunsa da, karmaşık görüntü analizi hala kaynak yoğun olabilir. İşlem süresini en aza indirmek için görüntülerinizi ve videolarınızı web teslimatı için optimize edin. Daha hızlı, ancak potansiyel olarak daha az doğru algılama için FaceDetector'daki fastMode seçeneğini kullanmayı düşünün.
• Gizlilik: Kullanıcılarınıza istemci tarafında işlemenin gizlilik avantajlarını vurgulayın. API'yi nasıl kullandığınız ve verilerinin nasıl işlendiği (veya bu durumda işlenmediği) konusunda şeffaf olun.
• Hata Yönetimi: API'nin desteklenmediği veya algılamanın başarısız olduğu durumları zarif bir şekilde ele almak için her zaman sağlam bir hata yönetimi ekleyin. Kullanıcıya bilgilendirici hata mesajları sağlayın.
• Özellik Algılama: Şekil Algılama API'sini kullanmadan önce, kullanıcının tarayıcısında desteklenip desteklenmediğini kontrol edin:

if ('FaceDetector' in window) {
  // FaceDetector destekleniyor
} else {
  console.warn('FaceDetector bu tarayıcıda desteklenmiyor.');
  // Alternatif bir uygulama sağlayın veya özelliği devre dışı bırakın
}

• Erişilebilirlik: Şekil Algılama API'sini kullanmanın erişilebilirlik sonuçlarını göz önünde bulundurun. Örneğin, belirli özellikleri etkinleştirmek için yüz tanıma kullanıyorsanız, algılanamayan kullanıcıların bu özelliklere erişmesi için alternatif yollar sağlayın.
• Etik Hususlar: Yüz tanıma ve diğer bilgisayarlı görü teknolojilerini kullanmanın etik sonuçlarının farkında olun. Bu teknolojileri ayrımcı veya zararlı olabilecek şekillerde kullanmaktan kaçının. Örneğin, belirli demografik gruplar için yanlış veya haksız sonuçlara yol açabilecek yüz tanıma algoritmalarındaki potansiyel önyargıların farkında olun. Bu önyargıları azaltmak için aktif olarak çalışın.

Kullanım Alanları ve Örnekler

Şekil Algılama API'si, web uygulaması geliştirme için çok çeşitli heyecan verici olasılıklar sunar. İşte birkaç örnek:

• Görüntü ve Video Düzenleme: Filtreler, efektler veya sansürler uygulamak için görüntülerdeki ve videolardaki yüzleri otomatik olarak algılayın.
• Artırılmış Gerçeklik (AR): Sanal nesneleri gerçek zamanlı olarak kullanıcıların yüzlerine yerleştirmek için yüz tanıma kullanın.
• Erişilebilirlik: Görme engelli kullanıcılara, görüntülerdeki nesneleri otomatik olarak algılayıp tanımlayarak yardımcı olun. Örneğin, bir web sitesi bir web kamerası akışında bir kişi olduğunda bunu bildirmek için yüz tanıma kullanabilir.
• Güvenlik: Güvenli kimlik doğrulama veya veri girişi için istemci tarafı barkod taraması uygulayın. Bu, özellikle mobil web uygulamaları için kullanışlı olabilir.
• Etkileşimli Oyunlar: Kullanıcıların yüz ifadelerine veya hareketlerine yanıt veren oyunlar oluşturun. Göz kırparak veya gülümseyerek bir karakteri kontrol ettiğiniz bir oyun hayal edin.
• Belge Tarama: OCR (Optik Karakter Tanıma) işlemi için taranan belgelerdeki metin bölgelerini otomatik olarak algılayın. TextDetector'ın kendisi OCR yapmasa da, metin bölgelerini daha ileri işlemler için bulmaya yardımcı olabilir.
• E-ticaret: Kullanıcıların fiziksel mağazalardaki ürünlerin barkodlarını tarayarak bir e-ticaret web sitesinde hızlıca bulmalarını sağlamak. Örneğin bir kullanıcı, bir kütüphanedeki bir kitabın barkodunu tarayarak onu internette satılık bulabilir.
• Eğitim: Öğrenci katılımını ölçmek ve öğrenme deneyimini buna göre ayarlamak için yüz tanıma kullanan etkileşimli öğrenme araçları. Örneğin, bir özel ders programı, bir öğrencinin kafasının karışıp karışmadığını veya hayal kırıklığına uğrayıp uğramadığını belirlemek için yüz ifadelerini izleyebilir ve uygun yardımı sağlayabilir.

Küresel Örnek: Küresel bir e-ticaret şirketi, mobil web sitesine barkod tarama özelliği entegre ederek çeşitli ülkelerdeki müşterilerin yerel dil veya ürün adlandırma kurallarından bağımsız olarak ürünleri hızla bulmasını sağlayabilir. Barkod, evrensel bir tanımlayıcı sağlar.

Şekil Algılama API'sine Alternatifler

Şekil Algılama API'si, tarayıcıda bilgisayarlı görü görevlerini gerçekleştirmek için uygun bir yol sağlarken, dikkate alınması gereken alternatif yaklaşımlar da vardır:

• Sunucu Tarafı İşleme: OpenCV veya TensorFlow gibi özel bilgisayarlı görü kütüphaneleri ve çerçeveleri kullanarak işlenmek üzere görüntüleri ve videoları bir sunucuya gönderebilirsiniz. Bu yaklaşım daha fazla esneklik ve kontrol sunar ancak daha fazla altyapı gerektirir ve gecikme yaratır.
• WebAssembly (Wasm): C++ gibi dillerde yazılmış bilgisayarlı görü kütüphanelerini WebAssembly'ye derleyip tarayıcıda çalıştırabilirsiniz. Bu yaklaşım, neredeyse yerel performans sunar ancak daha fazla teknik uzmanlık gerektirir ve uygulamanızın başlangıç indirme boyutunu artırabilir.
• JavaScript Kütüphaneleri: tracking.js veya face-api.js gibi birçok JavaScript kütüphanesi bilgisayarlı görü işlevselliği sunar. Bu kütüphanelerin kullanımı WebAssembly'den daha kolay olabilir ancak o kadar performanslı olmayabilir.

Sonuç

Ön Uç Şekil Algılama API'si, web uygulamalarınıza bilgisayarlı görü yetenekleri kazandırmak için güçlü bir araçtır. İstemci tarafı işlemeyi kullanarak performansı artırabilir, kullanıcı gizliliğini koruyabilir ve sunucu maliyetlerini azaltabilirsiniz. Tarayıcı desteği hala gelişmekte olsa da, API, karmaşık görevlerin doğrudan tarayıcıda gerçekleştirilebildiği web geliştirmenin geleceğine bir bakış sunuyor. Tarayıcı desteği geliştikçe ve API olgunlaştıkça, bu teknolojinin daha da yenilikçi ve heyecan verici uygulamalarını görmeyi bekleyebiliriz. API ile denemeler yapın, olasılıklarını keşfedin ve web'in geleceğini şekillendirmek için evrimine katkıda bulunun.

Bilgisayarlı görü teknolojileriyle çalışırken etik hususlara ve kullanıcı gizliliğine daima öncelik vermeyi unutmayın.